<style scoped>
  .suggestion{
    width:100%;
    height:100%;
    background: #eaeff3;
  }
  .head{
    height:50px;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items:center;
    background: #ffffff;
  }
  .head-left{
    position: absolute;
    width:40px;
    height:60px;
    left:0;
    top:0;
    color: #7f7a8e;
    text-align: center;
  }
  .head-left h1{
    margin-top: 22px;
  }
  .content{
    margin:40px 10px 0 10px;
  }
  .textarea{
    width:100%;
    overflow: hidden;
    margin-top: 20px;
  }
  .textarea textarea{
    font-size: 16px;
    padding: 4px 0 0 4px;
  }
  .exit{
    width:100%;
  }
  .exit h3{
    display: flex;
    background: -webkit-linear-gradient(left bottom, #6379F8, #91A5F8);
    /*width: 100%;*/
    margin:40px 0;
    padding: 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 20px;
  }
  .upload{
    display: flex;
    flex-direction: row;
    margin-top: 10px;
  }
  .uploadimage{
    width:50px;
    height:50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
  }
  .uploadimage p{
    font-size: 20px;
    color: #6379F8;
  }
  .image{
    width: 50px;
    height:50px;
    margin-right: 4px;
  }
  textarea{
    border: none;
  }
</style>

<template>
  <div class="suggestion">
    <div class="head">
      <div class="head-left" @click="goBack()">
        <h1 class="iconfont icon-xiangzuo1"></h1>
      </div>
      <div class="head-middle"><h3>意见反馈</h3></div>
    </div>
    <div class="content">
      <h3>问题和意见</h3>
      <div class="textarea">
        <textarea name="" id="" cols="100%" rows="6" placeholder="在此输入您的问题或意见" v-model="suggest"></textarea>
      </div>
      <p style="margin-top: 10px">最多上传4张照片</p>
      <div class="upload">
        <img :src="pic1" alt="" class="image" v-if="isPic1" id="img1">
        <img :src="pic2" alt="" class="image" v-if="isPic2">
        <img :src="pic3" alt="" class="image" v-if="isPic3">
        <img :src="pic4" alt="" class="image" v-if="isPic4">
        <label for="img-upload1">
          <div class="uploadimage">
            <p class="iconfont icon-jiahao"  data="imgtouch"></p>
          </div>
          <input type="file" style="display: none;" id="img-upload1" accept="image/*" @change="uploadImg1($event)"/>
      </label>
      </div>
      <div class="exit" @click="submit"><h3>提交</h3></div>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui'
  import axios from 'axios'
  import host from '../config.js'

  export default {
    data () {
      return {
        suggest: null,
        pic1:null,
        pic2:null,
        pic3:null,
        pic4:null,
        isPic1: false,
        isPic2: false,
        isPic3: false,
        isPic4: false
      }
    },
    methods: {
      goBack () {
        this.$router.go(-1)
      },
      uploadImg1 (e) {
        var files = e.target.files || e.dataTransfer.files
        if (!files.length) {
          return
        }
        this.createImage1(files[0])
      },
      createImage1 (file) {
        var pic = {}
        var reader = new FileReader()
        let that = this
        reader.onloadend = function (e) {
          if(that.isPic1 === true && that.isPic2 === true && that.isPic3 === true && that.isPic34 === true) {
            Toast({
              message: '最多上传4张照片',
              duration: 1000
            })
            return
          }
          if(that.isPic1 === true && that.isPic2 === true && that.isPic3 === true) {
            that.isPic4 = true
            that.pic4 = this.result
            return
          }
          if(that.isPic1 === true && that.isPic2 === true) {
            that.isPic3 = true
            that.pic3 = this.result
            return
          }
          if(that.isPic1 === true) {
            that.isPic2 = true
            that.pic2 = this.result
            return
          }
//          console.log(this.result)
          that.isPic1 = true
          that.pic1 = this.result
        }
        reader.readAsDataURL(file)
      },
      submit () {
        let that = this
        function dataURItoBlob(dataURI) {
          var byteString = atob(dataURI.split(',')[1]);
          var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
          var ab = new ArrayBuffer(byteString.length);
          var ia = new Uint8Array(ab);
          for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
          }
          return new Blob([ab], {type: mimeString});
        }
        var fd = new FormData();

        if (this.pic1 !== null) {
          var blob = dataURItoBlob(this.pic1);
          fd.append("img1", blob, 'image.png')
        }
        if (this.pic2 !== null) {
          var blob2 = dataURItoBlob(this.pic2);
          fd.append("img2", blob2, 'image.png')
        }
        if (this.pic3 !== null) {
          var blob3 = dataURItoBlob(this.pic3);
          fd.append("img3", blob3, 'image.png')
        }
        if (this.pic4 !== null) {
          var blob4 = dataURItoBlob(this.pic4);
          fd.append("img4", blob4, 'image.png')
        }

        fd.append('content', this.suggest);
        that.baseService.post('/usr/feedback', fd).then(function(data){
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if(data.data.code === 200){
            Toast({
              message: '反馈成功',
              duration: 1000
            })
            setTimeout(function(){
              that.$router.push('./my')
            },1000)
            that.suggest = null
            that.pic1 = null
            that.pic2 = null
            that.pic3 = null
            that.pic4 = null
          } else {
            Toast({
              message: data.data.msg,
              duration: 1000
            })
          }
        })
      }

    }
  }
</script>
